<html>
    
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <!-- Script includes go here -->
        <script src="jslib/debug.js"></script>
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <script src="jslib/draw2d.js"></script>
    </head>
    
    <body>
        <canvas id="canvas" width="640px" height="480px" />
        <script>
            /* Game code goes here */

            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });

            var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
            var draw2D = Draw2D.create({
                graphicsDevice: graphicsDevice
            });

            var r = 1.0,
                g = 0.0,
                b = 0.0,
                a = 1.0;
            var bgColor = [r, g, b, a];

            var tileHeight = 32;
            var tileWidth = 32;
            var x1 = 0;
            var y1 = 0;
            var x2 = 64;
            var y2 = 64;
            var colorlist = Array([1.0, 1.0, 0.0, 1.0], [1.0, 0.0, 0.0, 1.0]);
            var map = Array([1, 0, 2, 1, 1, 2,0,1], [0, 0, 0, 1, 2, 2,2,1], [2, 2, 0, 0, 1, 1,1,0], [1, 1, 1, 2, 1, 0,2,2], [0, 0, 0, 1, 2, 2,2,1]);

            var objectList = new Array();
			var tileArray = new Array();			

            var crateImageParameters = {
                src: "img/tileFlat3.png",
                mipmaps: true
            };

            var crateImage2Parameters = {
                src: "img/tileFlat1.png",
                mipmaps: true
            };

            var crateImage3Parameters = {
                src: "img/tileFlat3.png",
                mipmaps: true
            };
			var crateImage4Parameters = {
                src: "img/tileFlat4.png",
                mipmaps: true
            };

			tileArray[0] = graphicsDevice.createTexture(crateImageParameters);
            tileArray[1] = graphicsDevice.createTexture(crateImage4Parameters);
            tileArray[2] = graphicsDevice.createTexture(crateImage2Parameters);
            tileArray[3] = graphicsDevice.createTexture(crateImage3Parameters);

			var backgroundSprite = Draw2DSprite.create({
                width: tileWidth,
                height: tileHeight,
                x: 0,
                y: 0,
                textureRectangle: [0, 0, tileWidth, tileHeight],
            });
			
            function getRectangleList() {                
                var col = 0;
                var pos = 0;
				
                for (i = 0; i < map.length; i++) {
                    for (u = 0; u < map[i].length; u++) {
						
						var SpriteTile = Draw2DSprite.create({
							width: tileWidth,
							height: tileHeight,
							x: tileWidth * u + 100,
							y: tileHeight * i + 100,
							textureRectangle: [0, 0, tileWidth, tileHeight]
						});

                        SpriteTile.setTexture(tileArray[map[i][u]]);
						SpriteTile.setTextureRectangle([0,0,tileWidth,tileHeight]);
                            
						backgroundSprite = SpriteTile;
                        objectList[pos] = backgroundSprite;
                        pos++
                    }
                }
            }
			
            var sprite = Draw2DSprite.create({
                width: 25,
                height: 25,
                x: 50,
                y: graphicsDevice.height / 2,
                color: [1.0, 1.0, 1.0, 1.0],
                rotation: Math.PI / 4,
                textureRectangle: [64, 0, 128, 64]
            });
			
            var newsprite = graphicsDevice.createTexture({
                src: "img/tile1.png",
                mipmaps: true,
                onload: function(newsprite) {
                    if (newsprite) {
                        sprite.setTexture(newsprite);
                        sprite.setTextureRectangle([0, 0, 64, 64]);
                    }
                }
            });

            var PI2 = Math.PI * 2;
            var rotateAngle = Math.PI / 60;

            var isPlayerMoving = false;
            var check = true;
            var newXmouse = 0;
            var newYmouse = 0;
            var Xmouse = 0;
            var Ymouse = 0;
            var oldXmouse = sprite.x;
            var oldYmouse = sprite.y;

            var mouseSprite = Draw2DSprite.create({
                width: tileWidth,
                height: tileHeight,
                x: Xmouse,
                y: Ymouse,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [0, 0, 64, 64]
            });
			
            var mSprite = graphicsDevice.createTexture({
                src: "img/select.png",
                mipmaps: true,
                onload: function(mSprite) {
                    if (mSprite) {
                        mouseSprite.setTexture(mSprite);
                        mouseSprite.setTextureRectangle([0, 0, 64, 64]);
                    }
                }
            });
			
            canvas.addEventListener("mousemove", mouseCheck, false);
            canvas.addEventListener("mousedown", mouseClick, false);

            function mouseCheck(e) {
                Xmouse = rightPos(e.pageX);
                Ymouse = rightPos(e.pageY);
            }

            function rightPos(pos) {
                var ModPost = pos % tileHeight;
                var check = tileHeight / 2;
                var newPos = pos;
                if (ModPost <= check) {
                    newPos -= ModPost;
                    return newPos;
                }
                if (ModPost > check) {
                    for (i = ModPost; ModPost != tileHeight; ModPost++) {
                        newPos++
                    }
                    return newPos;
                }
                return newPos;
            }
            var checkvalue = false;

            function newDirection(newPos, oldPos) {

                if (newPos > oldPos) {
                    return oldPos += 1;
                }
                if (newPos < oldPos) {
                    return oldPos -= 1;
                }
                return oldPos;
            }

            function mouseClick(e) {

                newXmouse = e.pageX;
                newYmouse = e.pageY;
                isPlayerMoving = true;
            }

            function init() {
                getRectangleList();


            }
            window.onload = init();


            function update() {


                /* Update code goes here */
                //  b += 0.01;
                // bgColor[2] = b % 1; // Clamp color between 0-1
                sprite.rotation += rotateAngle;
                sprite.rotation %= PI2; //Wrap rotation at PI * 2
                if (isPlayerMoving) {
                    sprite.x = newDirection(newXmouse, sprite.x);
                    sprite.y = newDirection(newYmouse, sprite.y);
                    if (newXmouse == sprite.x && newYmouse == sprite.y) {
                        isPlayerMoving = false;
                    }
                }

                if (graphicsDevice.beginFrame()) {
//                    graphicsDevice.clear(bgColor, 1.0);
                    /* Rendering code goes here */

                    draw2D.begin();
                    for (var i = 0; i < objectList.length; i++) {
                        draw2D.drawSprite(objectList[i]);
                    }
					
                    draw2D.end();
                    draw2D.begin('alpha');
                    draw2D.drawSprite(sprite);
                    draw2D.end();
                    draw2D.begin('alpha');
                    draw2D.drawSprite(mouseSprite);
                    draw2D.end();

                    graphicsDevice.endFrame();
                }
            }

            TurbulenzEngine.setInterval(update, 1000 / 60);
        </script>
    </body>

</html>